<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>异步组件</title>
    <script src="../vue.global.js"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        const AsyncCommonItem = Vue.defineAsyncComponent(() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                        template: `<div>this is a async component</div>`
                    })
                }, 4000)
            })
        })
        const AsyncComponent = () => ({
            component: import('./AsyncComponent.vue'),
            delay: 200,
            timeout: 4000,
            template: `<div>this is a async component oo!</div> `
        })
        const app = Vue.createApp({
            data() {
                return {

                }
            },

            /**
             * 异步组件
             */
            template: `
          <div>
            <async-common-item/>
            <async-component/>
          </div>
        `,
            methods: {}
        });
        app.component("async-common-item", AsyncCommonItem)
        const vm = app.mount("#root");
    </script>
</body>

</html>